<template>
	<view class="anonymous-page">
		<view class="anonymous-item" v-for="(item, index) in anonymousList" :key="index">
			<view class="anonymous-head" @click="dynamicInfo(item.id)">
				<!-- <view v-if="item.info.img">
					<u-image height="200" width="300" :src="item.info.img" mode="aspectFit"></u-image>
				</view> -->
				<view class="anonymous-head-info"><rich-text :nodes="item.content"></rich-text></view>
			</view>

			<view class="anonymous-middle">
				<span>赞 {{ item.thumbNum }}</span>
				<view class="item-icon">
					<view class="thumb">
						<u-icon
							name="thumb-up"
							size="40"
							@click="thumbClick(item, index)"
							:class="{ 'thumb-active': item.thumbIds.includes(userId) }"
						></u-icon>
					</view>
					<!-- {{ item.thumbIds.includes(userId) }}| {{ userId }} -->
					<u-icon name="chat" size="40" @click="showSplitInput = !showSplitInput"></u-icon>
				</view>
			</view>
			<view class="anonymous-comment">
				<view class="anonymous-comment-item" v-for="(comment, idx) in item.comments" :key="idx">
					匿名: {{ comment.content }}
				</view>
			</view>
			<!-- <view v-if="showInput == true"> -->
			<view>
				<u-field
					v-model="inputValue[index]"
					label-width="0"
					placeholder="请输入评论"
					:focus="focus"
					class="comment-input"
				>
					<u-button size="mini" slot="right" type="default" @click="sendComment(item, index)">确定</u-button>
				</u-field>
			</view>
		</view>
	</view>
</template>

<script>
import uIcon from '../../uview-ui/components/u-icon/u-icon.vue';
import uImage from '../../uview-ui/components/u-image/u-image.vue';
export default {
	name: 'anonymous',
	components: { uIcon, uImage },
	props: ['anonymousList', 'user','jumpDynamicInfo'],
	data() {
		return { showSplitInput: false, inputValue: [], focus: false, thumbStatus: {}, userId: '' };
	},
	created() {
		// this.data.forEach((item)=>{
		// })
	},
	mounted() {
		console.log('props', this.anonymousList);
		for (let i = 0; i < this.anonymousList.length; i++) {
			let itemId = this.anonymousList[i].id;
			this.thumbStatus[itemId] = false;
		}
	},
	computed: {
		// isActive(){
		// 	console.log('ac',this.anonymousList[0].thumbIds.includes(userId))
		// }
	},
	watch: {
		anonymousList: {
			handler(val, oldval) {
				console.log('watch');
				this.inputValue = [];
				for (let i = 0; i < val.length; i++) {
					val[i].thumbs = val[i].thumbs || [];
					this.thumbStatus[val[i].id] = this.thumbStatus[val[i].id] || false;
					let thumbidArr = val[i].thumbIds.map((item, index, arr) => {
						if (item.thumbedId) {
							arr[index] = item.thumbedId;
						}
					});
					// for (let j = 0; j < val[i].thumbIds; j++) {}
					this.inputValue.push('');
				}
			},
			deep: true,
			immediate: true
		},
		user: {
			handler(val, oldval) {
				// 通过这个userid与传来的一个动态所有点赞的人的id进行比较进行判断是否点赞
				this.userId = val.userId.toString();
			},
			immediate: true
		}
	},
	methods: {
		dynamicInfo(dynamicId) {
			let type = 'anonymous';
			// uni.navigateTo({
			// 	url: `../../pages/internship/comment?dynamicId=${dynamicId}&type=${type}`
			// });
			let jumpParam = {
				dynamicId,
				type
			}
			this.$emit('jumpDynamicInfo',jumpParam)
		},
		async sendComment(item, index) {
			console.log('send comment');
			if (this.inputValue[index] == '') return;
			let param = {
				momentId: item.id,
				content: this.inputValue[index],
				fromId: this.user.userId
			};

			let res = await this.$u.api.addAnonymousComment(param);
			console.log('comment res', res);
			item.comments.push({
				commentatorName: this.user.nickName,
				content: this.inputValue[index]
			});
			item.commentNum++;
			this.inputValue[index] = '';
			// this.showInput = false
		},
		async thumbClick(item, index) {
			console.log('thumb-click', item, this.thumbStatus);
			console.log('user:', this.user);
			let param = {
				momentId: item.id,
				thumbedId: this.user.userId
			};
			let isClick = item.thumbIds.includes(this.userId);

			if (isClick) {
				// console.log('thumb-click-have');
				// // 以任务id为唯一标识
				// this.thumbStatus[item.id] = false;
				for (let i = 0; i < item.thumbIds.length; i++) {
					if (item.thumbIds[i] == this.userId) {
						item.thumbIds.splice(i, 1);
						item.thumbNum--;
						console.log('删除', item.thumbIds);
					}
				}
				// this.thumbStatus = Object.assign({}, this.thumbStatus);
				let res = await this.$u.api.delAnonymousMomentThumb(param);
				console.log('res-have', res);
			} else {
				// console.log('res-no');
				// this.thumbStatus[item.id] = true;
				item.thumbNum++;
				item.thumbIds.push(this.userId);
				// this.thumbStatus = Object.assign({}, this.thumbStatus);
				let res = await this.$u.api.clickAnonymousMomentThumb(param);
				console.log('res-no', res);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.anonymous-page {
	width: 96vw;
	margin: 2vh 2vw;
	// padding: 10rpx;
	// background-color: #fff;
	// border-radius: 20rpx;
	.anonymous-item {
		margin: 30rpx 0;
		&::before {
			content: url(../../static/icon/others/kan.png);
			position: relative;
			bottom: -40rpx;
			// background-image: url(../../static/icon/others/kan.png);
			// background-repeat: no-repeat;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.anonymous-head {
			background-color: rgba($color: #555253, $alpha: 1);
			color: #fff;
			min-height: 250rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			border-radius: 10rpx 10rpx 0 0;
			&-info {
				margin: 0 100rpx;
			}
		}
		.anonymous-middle {
			height: 70rpx;
			background-color: #fff;
			border-bottom: solid 2px #f9e4ff;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item-icon {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.thumb {
					// display: flex;
					// align-items: center;
					// justify-content: center;
					margin: 0 10rpx;
				}
				.thumb-active {
					color: #007aff;
				}
				.thumbnum {
					margin: 0 0 0 5rpx;
					font-size: 5rpx;
				}
			}
		}
		.anonymous-comment {
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;
			&-item {
				padding: 10rpx 20rpx;
				&-name {
					color: #295c9d;
					margin: 0 10rpx 0 0;
				}
			}
		}
	}
}
.thumb-active {
	color: #007aff;
}
</style>
